<template>
  <div>
        <!-- 导航栏 -->
  <van-nav-bar title="超值双人套餐" >
  <template #left>
    <van-icon name="cross"  size="20"/>
  </template>
  <template #right>
    <i class="iconfont icon-nav_ico_menu_h"></i>
  </template>
</van-nav-bar>


<!-- 图片区域 -->
<div class="bannerImg">
   <img src="../assets/iconfont/组 12.jpg" alt="">
</div>

<div class="body">
  <div class="wenzi">创建时间：<span>2023.02.17  15:31:09</span></div>
<div class="wenzi">使用说明：<span>营业时间内可用</span></div>
<div class="wenzi">使用规则：<span>每次仅限使用一张</span></div>
<div class="wenzi">有效期：<span>2023.02.17-2023.02.28</span></div>

<div class="line1 line">
     <div class="wenzi">是否上线：</div>
        <div class="shangxian">
           <span class="fou">否</span>
            <span class="shi">是</span>
        </div>
    </div>


    <div class="wenzi">
  使用情况：已领取：<span class="hong">111</span> 份
</div>
      <div class="wenzi sss">已使用：<span class="hong">100</span>份</div>
      <div class="wenzi sss">未使用：<span class="hong">11</span>份</div>

      <button class="btn">查看使用数据</button>
</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.van-nav-bar{
  background-color: #101010;
 }

 .iconfont {
  color: white;
 }
 ::v-deep .van-nav-bar__title {
  color: white;
 }
 .bannerImg {
  height: 240px;
  width: 100%;
 }
 .body {
  margin-left: 30px;
 }
 .wenzi {
  margin-top: 15px;
  margin-bottom: 15px;
  color: #343434;
  font-size: 13px;
  span {
    color: #969696;
    font-style: 13px;
  }
 }
 .line {
  margin-bottom: 10px;
}
.line1 {
  display: flex;
}
.hong {
  color: #fd8282 !important;
}
.shang {
  margin-top: 10px;
}
.shangxian {
  width: 70px;
  height: 35px;
  border: 2.2px solid #fbbb9f;
  border-radius: 8px;
}
.fou {
  border-radius: 5px;
  color: #fde2d2;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  display: inline-block;
  width: 40px;
  height: 100%;
  background-color: #fb8e51;
}
.shi {
  font-size: 12px;
  display: inline-block;
  width: 30px;
  height: 100%;
  line-height: 40px;
  text-align: center;
}
.yhj{
  margin-left: 15px;
  font-size: 3.73333vw;
  color:  #646566;
}
.sss {
  margin-left: 65px;
}
.btn {
  margin-left: 65px;
  width: 100px;
  line-height: 30px;
  font-size: 13px;
  text-align: center;
  color: #fffeff;
  border: 1px solid #fa884c;
  height: 30px;
  background-image:linear-gradient(#f77a40,#fe9a5c);
  border-radius: 5px;
}
</style>